<%--
  Created by IntelliJ IDEA.
  User: 14132
  Date: 2023/12/20
  Time: 13:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="component/common.css">
    <title>集相馆</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        function Verify1(){
            let username_info=document.getElementById("uname_info");
            let username=document.getElementById("userName").value;
            $.ajax({
                url:"verify",
                type:"post",
                data:{username},
                success(data){
                    console.log(data);
                    if (data==='ok'){
                        username_info.innerHTML="<font color='green'>用户名可用</font>"
                    }else {
                        username_info.innerHTML="<font color='#8b0000'>用户名不可用</font>"
                    }
            }
            })
        }
        function Verify2(){
            let userpwd_info=document.getElementById("upwd_info");
            let userpwd=document.getElementById("userPwd").value;
            if(/^\w{6,}$/.test(userpwd)){
                userpwd_info.innerHTML="<div style='color: green'>密码格式正确</div>"
            }else{
                userpwd_info.innerHTML="<div style='color: darkred'>密码最少6位，由数字、字符组成</div>"
            }
        }
    </script>
</head>
<body>
    <div class="userLogin">
        <div class="divColumnCC">
            <h1 style="margin-top: -40px">请输入基本信息</h1>
            <br>
            <form action="registerServlet" method="post">
                <div class="divRowCC">
                    <h4>账户：</h4>
                    <input style="width: 200px; height: 30px;" type="text" id="userName" name="userName" placeholder="请输入账户..." onclick="Verify1()">
                    <span id="uname_info"></span>
                </div>
                <div class="divRowCC">
                    <h4>密码：</h4>
                    <input style="width: 200px; height: 30px;" type="password" id="userPwd" name="userPwd" placeholder="请输入密码..." onclick="Verify2()">
                    <span id="upwd_info"></span>
                </div>
                <br>
                <div class="divRowCC" style="margin-left: 100px">
                    <input style="margin-right: 30px; width: 100px; height: 40px; " class="button1" type="submit" value="注册"></input>
                    <a href="userLogin.jsp" target="_self" >已有账户?</a>
                </div>
            </form>
        </div>
</div>
</body>
</html>